<template>
  <div>
    <van-tabs v-model="active">
      <van-tab title="短视频"><van-uploader :after-read="afterRead" /></van-tab>
      <van-tab title="动态"><p>暂无任何动态</p></van-tab>
      <van-tab title="互动"><van-empty description="描述文字" /></van-tab>
      <van-tab title="喜欢">
          <ul>
              <li>
                  <img src="https://img.alicdn.com/imgextra/i2/3390270589/O1CN01QVKIW41GDo01TUBL8_!!3390270589.png">
                  <span>皎若白云间1</span>
              </li>
              <li>
                  <img src="https://img.alicdn.com/imgextra/i3/3390270589/O1CN01wbPJmt1GDnzxtjW8k_!!3390270589.png">
                  <span>皎若白云间2</span>
              </li>
              <li>
                  <img src="https://img.alicdn.com/imgextra/i1/3390270589/O1CN01ashDNL1GDnzvDbHQo_!!3390270589.png">
                  <span>皎若白云间3</span>
              </li>
              <li>
                  <img src="https://img.alicdn.com/imgextra/i3/3390270589/O1CN018dMGDp1GDnztN8pa5_!!3390270589.png">
                  <span>皎若白云间4</span>
              </li>
          </ul>
        </van-tab>
    </van-tabs>

    <div class="jia">+</div>
  </div>
</template>

<script>
export default {
  name: "Dongtai",
  data() {
    return {
      active: 2,
    };
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
};
</script>

<style scoped>
.jia {
  width: 0.62rem;
  height: 0.62rem;
  background-color: #222224;
  color: #4efff5;
  border-radius: 50%;
  text-align: center;
  line-height: 0.62rem;
  font-size: 0.5rem;
  position: fixed;
  right: 0.2rem;
  bottom: 0.5rem;
}
p{
    /* background-color:skyblue; */
    height: 2rem;
    text-align: center;
    line-height: 2rem;
}
li{

}
li img{
    width: 100%;
}
li span{
display: block;
text-align: center;

}
</style>